<template>
  <div class="main">
      <m-Head class="head"></m-Head>
      <div class="menu-box">
          <ul>
            <li class="cseismicinfo"  @click="changeViews($event)">地震信息</li>
            <li class="worldEq" @click="changeViews($event)">全球历史地震</li>
            <li class="cthd" @click="changeViews($event)">三维地形图</li>
            <li class="dashboard" @click="changeViews($event)">图表分析</li>
          </ul>
      </div>
      <div class="view">
          <router-view :ok='ok'></router-view>
      </div>
  </div>
</template>

<script>
import mHead from "@/components/head";
export default {
  name: "computerPages",
  components: {
    mHead
  },
  data() {
    return {
      ok: true
    };
  },
  methods: {
    changeViews (e) {
      let str = e.target.className
      this.$router.push({ name: str})
    },
    initPage() {
      let str = "cseismicinfo";
      setTimeout(() => {
        this.$router.push({ name: str });
      }, 20);
    }
  },
  created() {
    this.initPage();
  }
};
</script>
<style>
    *{
      padding:0;
      margin: 0
    }
    .map-container{
      height: 92.5vh;
    }
    .main{
      font-size: 14px;
      height: 100%;
    }
    .head{
      width: 100%;
      height:7.5vh;
    }
    .menu-box{
      display: inline;
      height: 92.5vh;
      width: 14vw;
      background-color: #393d49;
      position: relative;
      overflow: hidden;
      float: left;
    }
    .view{
      width: 86vw;
      height: 92.5vh;
      position: absolute;
      /* margin-left: 222px; */
      display: inline;
      overflow: hidden;
    }
    ul{
      margin: 0;
      padding: 0;
    }
    ul > li{
      /* background-color: #393d49 !important; */
      margin: 0;
      padding: 0;
      list-style: none;
      color: #fff;
      cursor: pointer;
      height: 30px;
      padding: 3px;
      margin-left: 5px;
      padding-left: 2vw;
      line-height: 24px;
      text-align: left;
      opacity: 0.5;
    }
    ul>li:hover{
      opacity: 1;
      box-shadow: -8px 0 0 #5FB878;
    }
    
    
    .content-container .thd-map{
      height:100%;
    }
</style>

